<template>
  <div>

    <div v-if="trolleyList?.length != 0">
  <div>共{{allP}}￥<ElButton @click="buy" type="success">买！</ElButton></div>
  <el-table
    ref="multipleTableRef"
    :data="trolleyList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />

    <el-table-column property="bookId" label="书号" width="60" />

    <el-table-column label="图书" width="120">
      <template #default="scope"><img :src=" scope.row.bookPic " style="height: 40px"></template>
    </el-table-column>

    <el-table-column property="bookName" label="书名" width="120" />

    <el-table-column property="price" label="价格" width="120" />

    <el-table-column label="图书" width="240">
      <template #default="scope">   <el-input-number v-model="scope.row.num" :min="1" :max="10"  /> </template>
    </el-table-column>

    <el-table-column  label="操作" show-overflow-tooltip >
      <template #default="scope"><ElButton @click="del(scope.row.bookId)" >删除</ElButton></template>
      
    </el-table-column>
    

  </el-table>

  <div style="margin-top: 20px">
    <el-button @click="toggleSelection()"> 清除选择</el-button>
  </div>



  </div>
  <div v-if="trolleyList?.length == 0">
  啥也没有 去逛逛吧
  </div>

</div>
 
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable } from 'element-plus'
import {getTrolleyBYUserName ,delTrolleyApi} from '../../api/Trolley'
import {orderGroup} from '../../api/User'
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore()

const allP = ref<number>(0)

interface Trolley  {
  bookId:number,
  userNmae:string,
  bookName:string,
  bookPic:string,
  price:number,
  num:number
}
const trolleyList = ref<Array<Trolley>>([])

getTrolleyBYUserName(store.getUser()!.userName).then(res => {
    trolleyList.value = res.data.data
})

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const multipleSelection = ref<Trolley[]>([])


const buy = () => {
  orderGroup(
    {
      list:multipleSelection.value,
      allPrice:allP.value
    }
  ).then(res => {
    if(res.data.code !== 200){
      ElMessage({
        message:res.data.data,
        type:'error'
      })
    }else{
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
    }
  })
  
  
}
const toggleSelection = (rows?: Trolley[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

const handleSelectionChange = (val: Trolley[]) => {
  multipleSelection.value = val
  var x = 0
  for (let index = 0; index < val.length; index++) {
    x =x  + val[index].price * 100 * val[index].num
    console.log(val);
    
  }
  allP.value = x/100
}

const del = (id:any) => {
  console.log(id);
  delTrolleyApi(id,store.getUser()?.userName as string).then(res => {
    if(res.data.code === 200) {
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
      getTrolleyBYUserName(store.getUser()!.userName).then(res => {
    trolleyList.value = res.data.data
})
    }
  })
}


</script>

<style scoped >

</style>